<template>
    <div class="ratingselect">
        <div class="rating-type border-1px">
             <span  @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span> </span> <!--全部-->
             <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
             <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span class="count">{{negative.length}}</span></span>
        </div>
        <div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
            <span class="iconfont icon-31yiguanzhudianpu"></span>
            <span class="text">只看有内容的评价</span>
            <span class=""></span>
        </div>
    </div>
</template>

<script>
  import Vue from  'vue';
  const POSITIVE=0;
  const NEGATIVE=1;
  const ALL=2;
    export default {
        name: "ratingselect",
        props:{
          ratings:{
             type:Array,
              default(){
                 return [];
              }
          },
          selectType:{
              type:Number,
              default:ALL
          },
          onlyContent:{
            type:Boolean,
            default:false
          },
          desc:{
            type:Object,
            default(){
              return {
                all:'全部',
                positive:'满意',
                negative:'不满意'
              }
            }
          }
        },
      computed:{
           positives(){
             return this.ratings.filter((rating)=>{
                return rating.rateType===POSITIVE;
             });
           },
        negative(){
          return this.ratings.filter((rating)=>{
            return rating.rateType===NEGATIVE;
          });
        }
      },
      methods:{
        select(type,event){
           if(!event._constructed){
               return;
           }
          this.$emit('setselectType',type);//抛物线小球动画  没有实现
        },
        toggleContent(event){
            if(!event._constructed){
              return;
            }
          this.$emit('changeonlyContent');
        }
      }
    }
</script>

<style lang="less"  scoped>
  @import "../../common/stylus/mlxin";
  .ratingselect{
      .rating-type{
         padding: 18px 0;
         margin: 0 18px;
         font-size: 0;
        .block{
            display: inline-block;
            padding: 8px 12px;
            margin-right: 8px;
            border-radius: 1px;
            font-size: 12px;
            line-height: 16px;
            color: rgb(77,85,93);
            &.active{
               color: #fff;
            }
            .count{
               margin-left: 2px;
               font-size: 8px;
            }
            &.positive{
                background: rgba(0,160,220,0.2);
                 &.active{
                   background: rgb(0,160,220);
                 }
            }
            &.negative{
                   background: rgba(77,85,93,0.2);
                &.active{
                   background: rgb(77,85,93);
                }
            }
         }
      }
    .switch{
        padding: 12px 18px;
        line-height: 24px;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        color:rgb(147,153,159);
        font-size: 0;
        &.on{
          .icon-31yiguanzhudianpu{
             color: #00c850;
          }
        }
       .icon-31yiguanzhudianpu{
           display: inline-block;
           vertical-align: top;
           font-size: 24px;
           margin-right: 4px;
        }
        .text{
           display: inline-block;
           vertical-align: top;
           font-size: 12px;
          }
    }
  }
</style>
